﻿
@{
    ViewBag.Title = "模块自检";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="~/Content/css/frozenui.css">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/swiper.min.css">
<script src="~/Content/script/swiper.min.js"></script>
<script src="~/Content/script/Uitls.js"></script>
<script>
    ; (function (designWidth, maxWidth) {
        var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width > maxWidth && (width = maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px!important;}';
        }

        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
        refreshRem();

        win.addEventListener("resize", function () {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);

        win.addEventListener("pageshow", function (e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function (e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
</script>
<style>
    * {
        box-sizing: border-box;
    }

        *:before, *:after {
            box-sizing: border-box;
        }

        *, *:before, *:after {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

    html, body {
        height: 100%;
    }

    html, body, div, span, p, img, ul, li {
        border: 0 none;
        font-size: inherit;
        color: inherit;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
        /* 在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决 */
        max-height: 100000px;
    }

        ul li {
            list-style: none;
        }

    body {
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
        color: #333;
        background-color: #f2f2f2;
        font-size: 0.24rem;
    }


    .box {
        position: relative;
        margin: 0 auto;
        height: 100%;
        padding-bottom: 50px;
    }

    .header {
        height: 40%;
        background: #85d5ee;
        display: flex;
        align-items: center;
    }

        .header .text {
            height: 60%;
            width: 100%;
            text-align: center;
        }

            .header .text img {
                height: 63%;
                display: inline;
            }

        .header .loading img {
            animation: rotate 1s linear infinite;
        }

    @@keyframes rotate {
        0% {
            transform: rotate(0);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .header .text p {
        height: 35%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.5rem;
        color: #fff;
        letter-spacing: 10px;
    }

    .content li {
        height: 0.9rem;
        padding: 0 0.2rem;
        font-size: 0.3rem;
        border-bottom: 1px solid #b8b7b7;
        background: #fff;
        display: flex;
    }





        .content li .item {
            float: left;
            line-height: 0.9rem;
            text-indent: 0.2rem;
            max-width: 40%;
        }
       


        .content li .val {
            float: right;
            border: none;
            line-height: 0.8rem;
            outline: none;
            text-align: right;
            flex: 1;
        }

        .content li .camera {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
        }

    @@media all and (max-width:300px) {
        .content li .camera {
            margin: 0.3rem;
        }

        .content li .placehoker {
            width: 100%;
        }
    }

    .content li .placehoker {
        opacity: 0.7;
        text-align: right;
        font-size: 0.3rem;
        width: 55%;
    }


    .content li .scanning {
        background: #329ee6;
        padding: 0rem 0.2rem;
        margin-left: 0.15rem;
        border-radius: 0.1rem;
        color: #fff;
        border: 1px;
        height: 80%;
    }

        .content li .scanning img {
            height: 0.4rem;
            position: relative;
            top: 0.06rem;
            margin-right: 0.1rem;
            display: inline;
        }



    .content .checkMap {
        height: 0.7rem;
        padding: 0.3rem;
        box-sizing: content-box;
        display: none;
    }

        .content .checkMap .map {
            background: #2CCC6C;
            float: right;
            padding: 0rem 0.3rem;
            color: #fff;
            font-size: 0.3rem;
            border-radius: 0.1rem;
            border: none;
            line-height: 0.7rem;
            height: 100%;
        }

    .complete {
        position: absolute;
        left: 0;
        bottom: 50px;
        border: none;
        background: #14B3EA;
        width: 100%;
        height: 0.8rem;
        text-align: center;
        line-height: 0.8rem;
        color: #fff;
        font-size: 0.35rem;
        display: none;
    }
</style>

<div class="box">
    <div class="header">
        <div class="text">
            <img src="~/Content/image/startBtn.png" alt="">
            <p>扫描油机</p>
        </div>
    </div>
    <ul class="content">
        <li>
            <div class="item">油机信息</div>
            <div class="val camera">
                <input id="DTUID" class="placehoker" placeholder="请扫描或添加油机">
                <span id="ScanGen" class="scanning"><img src="~/Content/image/camera.png" alt="">扫描</span>
            </div>
        </li>
     
        <li>
            <div class="item">建立通讯时长(秒)</div>
            <input id="CommSecs" readonly="readonly" class="val">
        </li>

        <li>
            <div class="item">电池剩余余量(%)</div>
            <input id="BatteryVolt" type="text" readonly="readonly" class="val">
        </li>

        <li>
            <div class="item">GPS定位信息</div>
            <input id="BLocationOK" type="text" readonly="readonly" class="val">
        </li>

        <li class="checkMap">
            <button id="openmap" class="map">查看地图</button>
        </li>

    </ul>

    <button id="completeBtn" class="complete">完成</button>

</div>
<script src="~/Content/script/jweixin-1.4.0.js"></script>
<script>

    var L_Geting = "获取中...";
    var L_GetingFail = "获取失败";
    var L_Checking = "自检中...";
    var L_ClickStart = "点击开始";
    var L_CheckPass = "自检通过";
    var L_CheckFail = "自检失败";
    var L_ConnectionFail = "通讯失败";
    var L_LocationOk = "定位成功";
    var L_LocationFail = "定位失败";
    var L_LowBattery = "剩余电量不足";
    var Latitude;
    var Longitude;
    var GensetNum = '';
    var tryTimes = 0; //重置计数器
    var selfCheckReTry = 3;//限制次数
    var selfChecktimes = 1000 * 2;//秒//自检间刷新间隔时间
    //开始检测按钮
    function selfCheck() {
        $('.placehoker').css("width", "100%");
        $(".scanning").hide();
        $(".header .text").addClass("loading");
        $(".header .text p").html("自检中");
        $("#CommSecs,#BatteryVolt,#BLocationOK").val(L_Geting);
        $(".header").css("background", "#15B5E9");
        tryTimes = 0;//重置计数器
        getSelfCheckResult();
    }


    //刷新自检结果
    function getSelfCheckResult() {
        tryTimes++;
        if (tryTimes <= selfCheckReTry) {
            $.ajax({
                url: '/api/Generator/GetSelfCheckInfoByDtuId?dtuId=' + $("#DTUID").val() + '',
                type: 'get',
                success: function (data) {
                    //var result = JSON.parse(data);//json转数据
                    var result = data.Data;//json转数据
                    if (result.BCommOK) {
                        if ($("#CommSecs").val() === L_Geting) {
                            $("#CommSecs").val(result.CommSecs.toFixed(2));
                        }
                        if ($("#BatteryVolt").val() === L_Geting) {
                            //$("#BatteryVolt").val(result.BatteryVolt);
                            if (result.BBatteryOK) {
                                $("#BatteryVolt").val(result.BatteryPercent);
                            } else {
                                $("#BatteryVolt").val(L_LowBattery).css('color', 'rgb(255,122,122)');
                            }
                        }
                        if ($("#BLocationOK").val() === L_Geting) {
                            var locationResult;
                            if (result.BLocationOK) {
                                locationResult = L_LocationOk;//定位成功
                                $("#BLocationOK").val(locationResult);//定位成功
                            }
                        }
                    }
                    //只要其中一个值为获取中，则一直重新获取
                    if ($("#CommSecs").val() === L_Geting || $("#BatteryVolt").val() === L_Geting || $("#BLocationOK").val() === L_Geting) {
                        setTimeout(function () {
                            getSelfCheckResult();
                        }, selfChecktimes);
                    }//自检通过
                    else if ($("#CommSecs").val() !== L_Geting && $("#BatteryVolt").val() !== L_Geting && $("#BLocationOK").val() !== L_Geting) {
                        $(".header .text").removeClass("loading");
                        $(".header .text p").html("自检通过");
                        $(".header .text img").attr("src", "/Content/image/selfCheckPass.png");
                        $("#resutTxt").html(L_CheckPass); //自检通过
                        //查看地图按钮
                        $('.checkMap,.complete').show()
                        Latitude = result.Latitude;
                        Longitude = result.Longitude;
                    }
                    if (tryTimes === selfCheckReTry) {//最后一次重试
                        if ($("#CommSecs").val() === L_Geting) {//只要是通讯失败，后面全部显示失败
                            $("#CommSecs,#BatteryVolt,#BLocationOK").val(L_ConnectionFail).css('color', 'rgb(255,128,128)');
                            failUI();
                        }
                        else if ($("#BatteryVolt").val() === L_Geting) {//获取电池电量失败
                            $("#BatteryVolt").val(L_GetingFail).css('color', 'rgb(255,128,128)');
                            failUI();
                        }
                        else if ($("#BLocationOK").val() === L_Geting) {//定位失败
                            $("#BLocationOK").val(L_LocationFail).css('color', 'rgb(255,128,128)');
                            failUI();
                        }
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }
    }

    //测试用
    $("#ScanGen1").click(function () {
        var gScanCode = $("#DTUID").val(); // 当needResult 为 1 时，扫码返回的结果
        $("#DTUID").val('');
        //查询采集器DTUID
        $.ajax({
            url: '/api/Generator/GetDtuIdByGenOrDtu?id=' + gScanCode + '',
            type: 'get',
            success: function (data) {
                // var json = JSON.parse(data);//json转数据
                var json = data.Data;//json转数据
                if (json.Code == 1) {
                    var Result = json.Result[0];
                    console.log(Result);
                    if (Result.DTUID != null) {
                        $("#DTUID").val(Result.DTUID).attr({ readonly: 'true' });
                        GensetNum = Result.GensetNum;
                        selfCheck();
                    } else {
                        alert("油机或模块信息错误,请重新扫描");
                        return;
                    }
                } else {
                    alert("油机或模块信息错误,请重新扫描");
                    return;
                }
            },
            error: function (data) {
                console.log(JSON.stringify(data));
            }
        });
    })

    //失败后UI处理方法
    function failUI() {
        $(".header").css("background", "#FF7A7B")
        $(".header .text").removeClass("loading");
        $(".header .text p").html(L_CheckFail);
        $(".header .text img").attr("src", "/Content/image/selfCheckFail.png");
        $(".val").val(L_CheckFail).css("color", "#FF7A7B");
        $('.complete').show();
    }

    //微信jdk
    $(document).ready(function () {
        $.ajax({
            url: '/WeiXin/JsapiTicketSignature?fullUrl=' + encodeURIComponent(window.location.href) + '',
            type: 'get',
            //beforeSend: function () {
            //    $.showLoading("加载中...");
            //},
            success: function (data) {
                //$.hideLoading();
                var result = eval(data);
                // wx.config成功后才会触发wx.ready
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: result.appId, // 必填，公众号的唯一标识
                    timestamp: result.timestamp, // 必填，生成签名的时间戳
                    nonceStr: result.nonceStr, // 必填，生成签名的随机串
                    signature: result.signature,// 必填，签名
                    jsApiList: ["scanQRCode", "openLocation", "getLocation"] // 必填，需要使用的JS接口列表
                });
            }
        });
        wx.ready(function () {
            //模块扫描事件
            $("#ScanGen").click(function () {
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        var gScanCode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        $("#DTUID").val('');
                        //查询采集器DTUID
                        $.ajax({
                            url: '/api/Generator/GetDtuIdByGenOrDtu?id=' + gScanCode + '',
                            type: 'get',
                            success: function (data) {
                                //var json = JSON.parse(data);//json转数据
                                var json = data.Data;//json转数据
                                if (json.Code == 1) {
                                    var Result = json.Result[0];
                                    console.log(Result);
                                    if (Result.DTUID != null) {
                                        $("#DTUID").val(Result.DTUID).attr({ readonly: 'true' });
                                        GensetNum = Result.GensetNum;
                                        selfCheck();
                                    } else {
                                        alert("油机或模块信息错误,请重新扫描");
                                        return;
                                    }
                                } else {
                                    alert("油机或模块信息错误,请重新扫描");
                                    return;
                                }
                            },
                            error: function (data) {
                                console.log(JSON.stringify(data));
                            }
                        });
                    }
                });

                $("#openmap").click(function () {
                    wx.openLocation({
                        latitude: parseFloat(wgs84togcj02(Longitude, Latitude)[1]), // 纬度，浮点数，范围为90 ~ -90
                        longitude: parseFloat(wgs84togcj02(Longitude, Latitude)[0]), // 经度，浮点数，范围为180 ~ -180。
                        name: '油机位置', // 位置名
                        address: '油机编号:' + GensetNum, // 地址详情说明
                        scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
                        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                    });
                })
            });
        });


    })


    //自检完成按钮
    $("#completeBtn").click(function () {
        location.href = "/SelfCheck/Index"
    });



    //GPS坐标转火星坐标   用于腾讯地图
    var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
    var PI = 3.1415926535897932384626;
    var a = 6378245.0;
    var ee = 0.00669342162296594323;

    function wgs84togcj02(lng, lat) {
        if (out_of_china(lng, lat)) {
            return [lng, lat]
        }
        else {
            var dlat = transformlat(lng - 105.0, lat - 35.0);
            var dlng = transformlng(lng - 105.0, lat - 35.0);
            var radlat = lat / 180.0 * PI;
            var magic = Math.sin(radlat);
            magic = 1 - ee * magic * magic;
            var sqrtmagic = Math.sqrt(magic);
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
            var mglat = lat + dlat;
            var mglng = lng + dlng;
            return [mglng, mglat]
        }
    }


        @*/**
            * 判断是否在国内，不在国内则不做偏移
            * @param lng
            * @param lat
            * @returns {boolean}
        */*@
        function out_of_china(lng, lat) {
            return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
        }

    function transformlat(lng, lat) {
        var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
        return ret
    }

    function transformlng(lng, lat) {
        var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
        return ret

    }

</script>